﻿@page "/GridPaging"

@inject IFlatProductsProvider FlatProductService

<div class="demo-description mw-1100" id="Paging">
    <h2><DemoNavLink Link="GridPagingAndScrolling#Paging" />Data Grid - Paging</h2>
    <p>
        The DevExpress <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxDataGrid-1">Data Grid</a> for Blazor splits large amount of data rows across multiple pages and displays a pager for data navigation.
        Use the following properties to set up the pager:
    </p>
    <ul>
        <li><a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxDataGrid-1.ShowPager">ShowPager</a> - Specifies whether the pager is displayed.</li>
        <li><a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxDataGrid-1.PagerPageSizeSelectorVisible">PagerPageSizeSelectorVisible</a>
            - Specifies whether the page size selector is displayed. The selector consists of the predefined page sizes
            (<a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxDataGrid-1.PagerAllowedPageSizes">PagerAllowedPageSizes</a>) and the All item (if
            <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxDataGrid-1.PagerAllDataRowsItemVisible">PagerAllDataRowsItemVisible</a> is set to <b>true</b>).
        </li>
        <li><a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxDataGrid-1.PageSize">PageSize</a> - Specifies the page size.</li>
        <li><a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxDataGrid-1.PagerNavigationMode">PagerNavigationMode</a> – Specifies how users navigate between pages.</li>
        <li><a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxDataGrid-1.PageIndex">PageIndex</a>
            - Specifies the active page's index. To get the total number of pages in the pager, use the
            <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxDataGrid-1.PageCount">PageCount</a> property.
        </li>
    </ul>
</div>

@if (DataSource == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <DxDataGrid Data="@DataSource"
                ShowPager="true"
                PagerNavigationMode=@PagerNavigationMode.InputBox
                PagerPageSizeSelectorVisible="true"
                PagerAllDataRowsItemVisible="true"
                PagerAllowedPageSizes=@(new int[] {2,10,20,40})
                CssClass="mw-1100">
        <DxDataGridColumn Field="@nameof(ProductFlat.Id)" Caption="ID" Width="50px" />
        <DxDataGridColumn Field="@nameof(ProductFlat.ProductName)" Caption="Product Name" Width="330px"/>
        <DxDataGridColumn Field="@nameof(ProductFlat.Availability)" Caption="Availability" Width="110px">
            <DisplayTemplate>
                @{
                    var id = Guid.NewGuid().ToString();
                    var inStock = (context as ProductFlat).Availability;
                    <DxCheckBox Id="@id" Checked="@inStock" Enabled="false">
                        @if(inStock) {
                        <label class="form-check-label text-success" for="@id"><span>In stock</span></label>
                        } else {
                        <label class="form-check-label text-danger" for="@id"><span>Sold out</span></label>
                        }
                    </DxCheckBox>
                }
            </DisplayTemplate>
        </DxDataGridColumn>
        <DxDataGridColumn Field="@nameof(ProductFlat.Category)" Caption="Category" Width="150px"/>
        <DxDataGridColumn Field="@nameof(ProductFlat.Subcategory)" Caption="Subcategory" Width="150px"/>
        <DxDataGridDateEditColumn Field="@nameof(ProductFlat.LastUpdated)" Caption="Last Updated" Width="200px"/>
    </DxDataGrid>

    <CodeSnippet_Grid_Paging></CodeSnippet_Grid_Paging>
}

@code
{
    IEnumerable<ProductFlat> DataSource { get; set; }

    protected override async Task OnInitializedAsync()
    {
        DataSource = await FlatProductService.LoadAsync();
    }
}
